<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Welcome</title>

    <style type="text/css">

        HTML,BODY
        {
            /* [disabled]background:#000000; */
            background-color:#333333;
            color:#9899C3;
            font-family: Arial, Tahoma, Geneva, sans-serif;
            font-size:18px;
            height:100%;
            margin: 0;
            padding:0;	/*color:#356075;#175675*/
            background: url(static/images/bg_main.png);
        }

        A {
            color: #969baa;
            text-decoration: none;
        }

        SMALL {
            color: #FFB400;
        }

        @font-face {
            font-family: "Minecraft";
            src: url(static/fonts/minecraft_w4p.ttf);
        url(static/fonts/minecraft_w4p.ttf) format("truetype");
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: "HelveticaNeue";
            src: url(static/fonts/HelveticaNeue.ttf) format("truetype");
            font-weight: normal;
            font-style: normal;
        }



        .menu {
            font-family: Minecraft, Tahoma, Arial, serif;
            font-size: medium;
        }

        .element_menu {
            position: relative;
            float:left;


            margin-left: 18px;
            padding: 4px;

            top: -4px;
            left: -5px;

        }
        .element_menu:HOVER {
            /*color:#00CC99;*/
            margin-left: 16px;
            border-color: #00CC99;
            border-radius: 4px;
            border-style: solid;
            border-width: 1px;
            padding: 4px;

            position: relative;
            top: -5px;
            left: -4px;

            cursor:pointer;
        }

        .action_block {   /*#F0F8FF*/
            position: relative;
            min-height: 450px;
            width: 1000px;
            top: 100px;
            margin-left: auto;
            margin-right: auto;

        }
        .action_panel {

            font-family: Tahoma, Arial, serif;
            font-size: 10pt;
            margin-left: 20px;
            margin-right: auto;

            position: relative;
            top: 50px;
            height: 300px; width: 450px;

            float: left;
            display: block;

        }
        .marked {
            color: #00CC99;
        }

        .marked:hover {
            position: relative;
            border-width: 0;
            top: -4px;
            margin-left: 18px;
            left: -5px;
            cursor: default;
        }


        .controller_up_left {

             width: 100%; height: 200px;
             background-color: #333333;
             background: url(static/images/up-left.png);

        }

        .controller_up_right {

            width: 100%; height: 200px;
            background-color: #333333;
            background: url(static/images/up-right.png);

        }

        .controller_down_left {

             width: 100%; height: 100px;
             background-color: #000;
             position: relative;
             top: 8px;

        }

       .controller_down_right {

            width: 100%; height: 100px;
            background-color: #000;
            position: relative;
            top: 8px;

       }

        .action_block h3 {
            position: relative; text-align: left; margin-left: 20px;
            color: #E0D0D0;
            padding: 0;
            margin-bottom: 0;
            margin-top: 0;
        }

        .caption_controller {
            /*text-align: center;*/
            display: table-cell;
            vertical-align: middle;
            font-size: 2em;
            padding: 30px;
            width: 410px; height: 200px;
            position: relative;
            font-family: Arial, serif;
            text-shadow: #111111 0px 3px 0px;
            text-align: right;
            color: #FFF;
        }

    </style>


    <link rel="stylesheet" type="text/css" href="static/css/main.css'" />
</head>





<body >

<div style="position: relative">

    <div style="position: absolute; width: 100%; height: 100%">
        <div style="width: 100%; height: 46px; margin-left: auto; margin-right: auto;
        background-image:url(static/images/bg_top.png)">

            <div style="width: 1000px; margin-left: auto; margin-right: auto; background-color: #ff66cb">

                <div style="width: 246px; height: 46px; float: left;">
                    <img src="static/images/logo.png" alt="Minecraft Panel">
                </div>

                <div style="width: 754px; height: 46px; float: left; margin-left: auto; margin-right: auto">

                    <div class="menu" style="position: relative; text-align: center; margin: auto; top: 12px; width: 500px; height: 18px;">
                          <a class="element_menu marked">Управление сервером</a>
                          <a class="element_menu">Админы</a>
                          <a class="element_menu" href="/about">Поддержка</a>
                    </div>

                </div>
            </div>

        </div>



        <div id="content" style="width: 100%; min-height: 600px; position: relative;/* background-color: #9899C3;*/">

            <div class="action_block">

                <div accesskey="" style="width: 100%; min-height: 100%; margin-left: 20px; margin-right: auto;">

                    <h3>Сервер</h3>

                    <div id="1" class="action_panel">

                        <div id="1-1" class="controller_up_left"><!--LEFT-->

                            <div class="caption_controller">
                                Управляй сервером <br>
                                <small>x32 слота</small>
                            </div>


                        </div>

                        <div id="1-2" class="controller_down_left">
                            <!--LEFT-DOWN-->

                        </div>

                    </div>

                    <div id="2" class="action_panel">

                        <div id="2-1" class="controller_up_right"><!--RIGHT-->
                            <div class="caption_controller">
                                Загрузи карту
                            </div>
                        </div>

                        <div id="2-2" class="controller_down_right">
                            <!--RIGHT-DOWN-->
                        </div>

                    </div>

                </div>

            </div>



        </div>

    </div>

</div>

</body>
</html>